import {
  defineComponent,
  ref,
  resolveDirective,
  withDirectives,
  openBlock,
  createElementBlock,
  createElementVNode
} from "vue";
import { b as useProp, _ as _export_sfc } from "./index-CEDaTd93.js";
const _hoisted_1 = { class: "dv-decoration-10" };
const _hoisted_2 = ["width", "height"];
const _hoisted_3 = ["stroke", "points"];
const _hoisted_4 = ["stroke", "points", "stroke-dasharray"];
const _hoisted_5 = ["values"];
const _hoisted_6 = ["values"];
const _hoisted_7 = ["stroke", "points", "stroke-dasharray"];
const _hoisted_8 = ["values"];
const _hoisted_9 = ["values"];
const _hoisted_10 = ["stroke", "points", "stroke-dasharray"];
const _hoisted_11 = ["values"];
const _hoisted_12 = ["values"];
const _hoisted_13 = ["cy", "fill"];
const _hoisted_14 = ["values"];
const _hoisted_15 = ["cx", "cy", "fill"];
const _hoisted_16 = ["values"];
const _hoisted_17 = ["values"];
const _hoisted_18 = ["cx", "cy", "fill"];
const _hoisted_19 = ["values"];
const _hoisted_20 = ["values"];
const _hoisted_21 = ["cx", "cy", "fill"];
const _hoisted_22 = ["values"];
const _hoisted_23 = ["values"];
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "Decoration",
  props: {
    component: {}
  },
  setup(__props) {
    const props = __props;
    const propChange = (propKeys, value) => {
      if (propKeys.length !== 2) {
        return;
      }
      if (propKeys[0] === "base" && propKeys[1] === "color1")
        mergedColor.value[0] = value;
      if (propKeys[0] === "base" && propKeys[1] === "color2")
        mergedColor.value[1] = value;
    };
    const { propValue } = useProp(props.component, propChange);
    const width = ref(300);
    const height = ref(35);
    const resizeHandler = entry => {
      const rect = entry.contentRect;
      width.value = rect.width;
      height.value = rect.height;
    };
    const mergedColor = ref([propValue.base.color1, propValue.base.color2]);
    return (_ctx, _cache) => {
      const _directive_resize = resolveDirective("resize");
      return withDirectives(
        (openBlock(),
        createElementBlock("div", _hoisted_1, [
          (openBlock(),
          createElementBlock(
            "svg",
            {
              width: width.value,
              height: height.value
            },
            [
              createElementVNode(
                "polyline",
                {
                  stroke: mergedColor.value[1],
                  "stroke-width": "2",
                  points: `0, ${height.value / 2} ${width.value}, ${
                    height.value / 2
                  }`
                },
                null,
                8,
                _hoisted_3
              ),
              createElementVNode(
                "polyline",
                {
                  stroke: mergedColor.value[0],
                  "stroke-width": "2",
                  points: `5, ${height.value / 2} ${width.value * 0.2 - 3}, ${
                    height.value / 2
                  }`,
                  "stroke-dasharray": `0, ${width.value * 0.2}`,
                  fill: "freeze"
                },
                [
                  createElementVNode(
                    "animate",
                    {
                      id: "d10ani2",
                      attributeName: "stroke-dasharray",
                      values: `0, ${width.value * 0.2};${
                        width.value * 0.2
                      }, 0;`,
                      dur: "3s",
                      begin: `d10ani1.end`,
                      fill: "freeze"
                    },
                    null,
                    8,
                    _hoisted_5
                  ),
                  createElementVNode(
                    "animate",
                    {
                      attributeName: "stroke-dasharray",
                      values: `${width.value * 0.2}, 0;0, ${width.value * 0.2}`,
                      dur: "0.01s",
                      begin: `d10ani7.end`,
                      fill: "freeze"
                    },
                    null,
                    8,
                    _hoisted_6
                  )
                ],
                8,
                _hoisted_4
              ),
              createElementVNode(
                "polyline",
                {
                  stroke: mergedColor.value[0],
                  "stroke-width": "2",
                  points: `${width.value * 0.2 + 3}, ${height.value / 2} ${
                    width.value * 0.8 - 3
                  }, ${height.value / 2}`,
                  "stroke-dasharray": `0, ${width.value * 0.6}`
                },
                [
                  createElementVNode(
                    "animate",
                    {
                      id: "d10ani4",
                      attributeName: "stroke-dasharray",
                      values: `0, ${width.value * 0.6};${width.value * 0.6}, 0`,
                      dur: "3s",
                      begin: `d10ani3.end + 1s`,
                      fill: "freeze"
                    },
                    null,
                    8,
                    _hoisted_8
                  ),
                  createElementVNode(
                    "animate",
                    {
                      attributeName: "stroke-dasharray",
                      values: `${width.value * 0.6}, 0;0, ${width.value * 0.6}`,
                      dur: "0.01s",
                      begin: `d10ani7.end`,
                      fill: "freeze"
                    },
                    null,
                    8,
                    _hoisted_9
                  )
                ],
                8,
                _hoisted_7
              ),
              createElementVNode(
                "polyline",
                {
                  stroke: mergedColor.value[0],
                  "stroke-width": "2",
                  points: `${width.value * 0.8 + 3}, ${height.value / 2} ${
                    width.value - 5
                  }, ${height.value / 2}`,
                  "stroke-dasharray": `0, ${width.value * 0.2}`
                },
                [
                  createElementVNode(
                    "animate",
                    {
                      id: "d10ani6",
                      attributeName: "stroke-dasharray",
                      values: `0, ${width.value * 0.2};${width.value * 0.2}, 0`,
                      dur: "3s",
                      begin: `d10ani5.end + 1s`,
                      fill: "freeze"
                    },
                    null,
                    8,
                    _hoisted_11
                  ),
                  createElementVNode(
                    "animate",
                    {
                      attributeName: "stroke-dasharray",
                      values: `${width.value * 0.2}, 0;0, ${width.value * 0.3}`,
                      dur: "0.01s",
                      begin: `d10ani7.end`,
                      fill: "freeze"
                    },
                    null,
                    8,
                    _hoisted_12
                  )
                ],
                8,
                _hoisted_10
              ),
              createElementVNode(
                "circle",
                {
                  cx: "2",
                  cy: height.value / 2,
                  r: "2",
                  fill: mergedColor.value[1]
                },
                [
                  createElementVNode(
                    "animate",
                    {
                      id: "d10ani1",
                      attributeName: "fill",
                      values: `${mergedColor.value[1]};${mergedColor.value[0]}`,
                      begin: `0s;d10ani7.end`,
                      dur: "0.3s",
                      fill: "freeze"
                    },
                    null,
                    8,
                    _hoisted_14
                  )
                ],
                8,
                _hoisted_13
              ),
              createElementVNode(
                "circle",
                {
                  cx: width.value * 0.2,
                  cy: height.value / 2,
                  r: "2",
                  fill: mergedColor.value[1]
                },
                [
                  createElementVNode(
                    "animate",
                    {
                      id: "d10ani3",
                      attributeName: "fill",
                      values: `${mergedColor.value[1]};${mergedColor.value[0]}`,
                      begin: `d10ani2.end`,
                      dur: "0.3s",
                      fill: "freeze"
                    },
                    null,
                    8,
                    _hoisted_16
                  ),
                  createElementVNode(
                    "animate",
                    {
                      attributeName: "fill",
                      values: `${mergedColor.value[1]};${mergedColor.value[1]}`,
                      dur: "0.01s",
                      begin: `d10ani7.end`,
                      fill: "freeze"
                    },
                    null,
                    8,
                    _hoisted_17
                  )
                ],
                8,
                _hoisted_15
              ),
              createElementVNode(
                "circle",
                {
                  cx: width.value * 0.8,
                  cy: height.value / 2,
                  r: "2",
                  fill: mergedColor.value[1]
                },
                [
                  createElementVNode(
                    "animate",
                    {
                      id: "d10ani5",
                      attributeName: "fill",
                      values: `${mergedColor.value[1]};${mergedColor.value[0]}`,
                      begin: `d10ani4.end`,
                      dur: "0.3s",
                      fill: "freeze"
                    },
                    null,
                    8,
                    _hoisted_19
                  ),
                  createElementVNode(
                    "animate",
                    {
                      attributeName: "fill",
                      values: `${mergedColor.value[1]};${mergedColor.value[1]}`,
                      dur: "0.01s",
                      begin: `d10ani7.end`,
                      fill: "freeze"
                    },
                    null,
                    8,
                    _hoisted_20
                  )
                ],
                8,
                _hoisted_18
              ),
              createElementVNode(
                "circle",
                {
                  cx: width.value - 2,
                  cy: height.value / 2,
                  r: "2",
                  fill: mergedColor.value[1]
                },
                [
                  createElementVNode(
                    "animate",
                    {
                      id: "d10ani7",
                      attributeName: "fill",
                      values: `${mergedColor.value[1]};${mergedColor.value[0]}`,
                      begin: `d10ani6.end`,
                      dur: "0.3s",
                      fill: "freeze"
                    },
                    null,
                    8,
                    _hoisted_22
                  ),
                  createElementVNode(
                    "animate",
                    {
                      attributeName: "fill",
                      values: `${mergedColor.value[1]};${mergedColor.value[1]}`,
                      dur: "0.01s",
                      begin: `d10ani7.end`,
                      fill: "freeze"
                    },
                    null,
                    8,
                    _hoisted_23
                  )
                ],
                8,
                _hoisted_21
              )
            ],
            8,
            _hoisted_2
          ))
        ])),
        [[_directive_resize, resizeHandler]]
      );
    };
  }
});
const Decoration = /* @__PURE__ */ _export_sfc(_sfc_main, [
  ["__scopeId", "data-v-c65d1234"]
]);
export { Decoration as default };
